<template>
    <div class="toast">
    <!-- 
        
    type的值如果是warning，就是icon-toast-jinggao这个类
    type的值如果是success，就是icon-toast_chenggong这个类
    type的值如果是danger，就是icon-toast-shibai_huaban这个类
    -->
        <i class="iconfont" 
        :class="type=='warning'?'icon-toast-jinggao':
        (type=='success'?'icon-toast_chenggong':'icon-toast-shibai_huaban')
        "
        ></i>
        <span>{{msg}}</span> 
    </div>
</template>

<script>
import {mapState} from "vuex"
export default {
    data () {
        return {


        }
    },
    computed:{
        ...mapState({
            msg:state=>state.handleToast.msg,
            type:state=>state.handleToast.type
        })
    }
}
</script>

<style lang = "less" scoped>
    .toast{
        position: fixed;
        left: 50%;
        top: 0;
        padding: 10px 15px;
        background-color: #fff;
        border-radius: 5px;
        font-size: 18px;
        transform: translateX(-50%);
        box-shadow: 0 0 6px #fff;

        .icon-toast-jinggao{
            color: gold;
        }
        .icon-toast-shibai_huaban{
            color: red;
        }
        .icon-toast_chenggong{
            color:green;
        }
        i{
            margin-right: 10px;
        }
    }

    
</style>